<template>
  <div class="app-container documentation-container">
    <div class="top">
      <div class="add_zhandian">
        <el-button type="primary" icon="el-icon-edit" @click.native="addsite">新增批次</el-button>
      </div>
      <div class="selech">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="搜索类型">
            <el-select v-model="formInline.flag" placeholder="请选择">
              <el-option
                v-for="item in pcname"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="">
            <el-input v-model="formInline.val" placeholder="请输入对应内容"/>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click.native="onSubmit">搜索</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="content_body">
      <ul>
        <li class="left_">
          <el-tree :data="datagoods" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
        </li>
        <li class="right_">
          <el-table
            :data="tableData"
            v-loading="loading"
            border
            style="width: 100%;margin-top:30px;"
          >
            <el-table-column
              prop="pname"
              label="批次名称"
              width="120"
            />
            <el-table-column
              prop="pnum"
              label="批次编号"
              width="180"
            />
            <el-table-column align="center" label="二维码" width="130">
              <template slot-scope="scope">
                <img :src="scope.row.city" alt="" class="imas">
              </template>
            </el-table-column>
            <el-table-column
              prop="plook"
              label="二维码扫描次数"
              width="100"
            />
            <el-table-column align="center" label="状态" width="80">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.status == 1">启用中</el-tag>
                <el-tag type="danger" v-if="scope.row.status == 2">停用中</el-tag>
              </template>
            </el-table-column>
            <el-table-column
              prop="created_at"
              label="创建时间"
              width="180"
            />
            <el-table-column align="center" label="操作" width="420">
              <template slot-scope="scope">
                <el-button type="primary" size="small" @click="handleEdit(scope)">导出二维码</el-button>
                <el-button type="warning" size="small" v-if="scope.row.status == 1" @click="handfreezing(scope.$index,tableData,scope)">停用</el-button>
                <el-button type="primary" size="small" v-if="scope.row.status == 2" @click="handfreezing(scope.$index,tableData,scope)">启用</el-button>
                <el-button type="danger" size="small" @click="handleDelete(scope.$index,tableData,scope)">删除批次
                </el-button>
                <el-button type="success" size="small" plain @click="addchukudan(scope)">新增出库单
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </li>
      </ul>
    </div>
    <el-pagination
      @current-change="handleCurrentChange"
      :page-size="pagesize"
      layout="prev, pager, next"
      :total="total">
    </el-pagination>

    <el-dialog title="新增批次" width="80%" :visible.sync="piciflag">
      <el-form :label-position="labelPosition" :rules="rules" ref="ruleForm" label-width="120px"
               :model="formLabelAlign">
        <el-form-item label="所属产品" prop="pid">
          <el-select v-model="formLabelAlign.pid" filterable placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.ename"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="批次名称" prop="pname">
          <el-input v-model="formLabelAlign.pname"></el-input>
        </el-form-item>
        <el-form-item label="批次编号" prop="pnum">
          <el-input v-model="formLabelAlign.pnum"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="piciflag = false">取 消</el-button>
    <el-button type="primary" @click="Addpic('ruleForm')">确 定</el-button>
  </span>
    </el-dialog>


    <el-dialog
      title="提示"
      :visible.sync="deletegoodsflag"
      width="30%"
    >
      <span>此操作会永久删除该批次，您想好了嘛？</span>
      <span slot="footer" class="dialog-footer">
    <el-button @click="deletegoodsflag = false">取 消</el-button>
    <el-button type="primary" @click="DetermineGoods">确 定</el-button>
  </span>
    </el-dialog>

    <el-dialog title="新增出库单" width="80%" :visible.sync="chukuflag">
      <el-form :label-position="labelPosition" :rules="chukurules" ref="ruleForm" label-width="120px"
               :model="formchuku">
        <el-form-item label="出库单号" prop="num">
          <el-input v-model="formchuku.num"></el-input>
        </el-form-item>
        <el-form-item type="number" label="出库数量" prop="number">
          <el-input v-model="formchuku.number"></el-input>
        </el-form-item>
        <el-form-item label="出库备注" prop="remark">
          <el-input  type="textarea" v-model="formchuku.remark"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="chukuflag = false">取 消</el-button>
    <el-button type="primary" @click="Addchuku('ruleForm')">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    name: 'Documentation',
    components: {},
    data() {
      return {

        //出库单
        chukuarrid:'', //出库Object
        chukuflag:false,
        chukurules: {
          pid: [
            { required: true, message: '请选择批次', trigger: 'blur' }
          ],
          num: [
            { required: true, message: '请输入出库单号', trigger: 'blur' }
          ],
          number:[
            { required: true, message: '请输入出库数量', trigger: 'blur' }
          ],
          remark: [
            { required: true, message: '请输入出库备注', trigger: 'blur' }
          ]
        },
        formchuku: {
          bid: '',
          num: '',
          number:'',
          remark: '',
        },



        pcname: [{
          value: 'name',
          label: '批次名称'
        }, {
          value: 'number',
          label: '批次编号'
        }, {
          value: 'all',
          label: '全部'
        }],
        options: [],
        value: '',
        deletegoodsflag: false,
        goodsindex: 0,
        goodsrows: [],
        pageid: '',
        loading: true,//
        pagesize: 3,//每页条数
        total: 0,//总条目数
        rules: {
          pid: [
            { required: true, message: '请选择产品', trigger: 'blur' }
          ],
          pname: [
            { required: true, message: '请输入批次名称', trigger: 'blur' }
          ],
          pnum: [
            { required: true, message: '请输入批次编号', trigger: 'blur' }
          ]
        },
        defaultProps: {
          children: 'children',
          label: 'label'
        },
        datagoods: [],
        pidval: [],
        labelPosition: 'right',
        formLabelAlign: {
          pid: '',
          pname: '',
          pnum: '',
          type: '1',
          children:[],
        },
        piciflag: false,
        formInline: {
          flag: '',
          val: ''
        },
        tableData: [],
        mobanarr: [] //模板
      }
    },
    methods: {
      addchukudan(val){    //新增出库单
       this.chukuflag = true;
       this.chukuarrid = val.row.id.toString();
       this.formchuku = {
         bid: '',
         num: '',
         number:'',
         remark: '',
       }
      },
      Addchuku(formName){
        this.$refs[formName].validate((valid) => {
            if (valid) {
              this.formchuku.bid = this.chukuarrid
              this.$apifn.AddoutBounds(this.formchuku).then((ref) => {
                if (ref.data.Response.code == 200) {
                  this.chukuflag = false;
                  this.$message({
                    message: '新增出库单成功',
                    type: 'success'
                  });

                }
              }).catch((res) => {
              })

            }else{
            return false
            };
        })
      },
      handfreezing(index, rows, val){
        let status = '';
        // console.log(val.row.status);
            switch (val.row.status) {
              case '1':
                status = '2';
                break;
              case '2':
                status = '1';
                break;
            }

        let dataupdate = {
          'id': val.row.id,
          'upload':{'status':status}
        }

        this.$apifn.EditBatches(dataupdate).then((ref) => {
          if (ref.data.Response.code == 200) {
            rows[index].status = status
            this.$message({
              message: '操作成功',
              type: 'success'
            })
            // this.piciflag = false
          }
        }).catch((res) => {
        })
      },
      GetTemp() {
        this.$apifn.GetTemp().then((ref) => {
          if (ref.data.Response.code == 200) {
            this.mobanarr = ref.data.Response.data
          }
        }).catch((res) => {
        })
      },
      Addpic(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {

            let data_object = {}
            this.options.forEach((item)=>{
              if(item.id == this.formLabelAlign.pid){
                data_object = item
              }
            })
            switch (data_object.type) {
              case '1':  //养殖
                this.formLabelAlign.children = this.mobanarr.y;
                break
              case '2':  //种植
                this.formLabelAlign.children = this.mobanarr.z;
                break
            };

            this.$apifn.AddNatches(this.formLabelAlign).then((ref) => {
              if (ref.data.Response.code == 200) {
                this.$message({
                  message: '添加批次成功',
                  type: 'success'
                })
                this.batchlist(this.formLabelAlign.pid, 1);
                this.formLabelAlign={
                    pid: '',
                    pname: '',
                    pnum: '',
                    type: '1',
                  children:[]
                }
                this.piciflag = false;

              }
            }).catch((res) => {
              this.$message({
                message: res.request.response.errors.pnum,
                type: 'danger'
              })
            })

          } else {
            return false
          }
        })
      },
      handleNodeClick(data) {   //编辑导航栏点击
        this.formLabelAlign.pid = data.id;
        // console.log(data);
        this.batchlist(data.id, 1)
      },
      onSubmit() {  //搜索批次
        if (this.formInline.flag == '') {
          this.$notify({
            title: '警告',
            message: '请选择搜索类型',
            type: 'warning'
          })
          return false
        }
        if (this.formInline.val == '') {
          this.$notify({
            title: '警告',
            message: '请输入搜索内容',
            type: 'warning'
          })
          return false
        }
        this.$apifn.SearchBatches({ 'type': this.formInline.flag, 'val': this.formInline.val }).then((ref) => {
          if (ref.data.Response.code == 200) {
            this.tableData = ref.data.Response.data
          }
        }).catch((res) => {
        })
      },
      addsite() { // 新增批次
        this.piciflag = true
        // this.$router.push({ path: '/addsite/addsitePage' });
      },

      goodscontent() {  //商品导航分类
        this.$apifn.ShowBatches({ 'limit': '1000' }, '1').then((ref) => {
          if (ref.data.Response.code == 200) {
            this.loading = false;
            this.options = ref.data.Response.data.data;
            console.log(this.options);
            ref.data.Response.data.data.forEach((item) => {
              this.datagoods.push({ 'label': item.ename, 'id': item.id, 'batch': item.batch })
            })
            this.batchlist(ref.data.Response.data.data[0].id, 1)
          }
        }).catch((res) => {

        })
      },
      handleCurrentChange(val) {//分页
        this.loading = true
        this.batchlist(this.formLabelAlign.pid, val)
      },
      datagod(val) {
        val.forEach((item) => {
          this.datagoods.push({ 'label': item.ename, 'id': item.id })
        })
      },
      batchlist(pid, e) {  //批次列表
        this.$apifn.PidShowBatches({ 'limit': this.pagesize, 'pid': pid }, e).then((ref) => {
          if (ref.data.Response.code == 200) {
            this.tableData = ref.data.Response.data.data;
            this.total = ref.data.Response.data.total;
            this.loading = false;

          }
        }).catch((res) => {
        })
      },
      handleDelete(index, rows, val) { //删除
        this.goodsindex = index
        this.goodsrows = val.row
        this.deletegoodsflag = true;
      },
      DetermineGoods() {
        this.$apifn.DeleteBatches({ 'id': this.goodsrows.id }).then((ref) => {
          if (ref.data.Response.code == 200) {
            this.tableData.splice(this.goodsindex, 1)
            this.$message({
              message: '成功删除该批次',
              type: 'success'
            })
            this.deletegoodsflag = false
          }
        }).catch((res) => {
        })

      },
      deletebatch() {

      }
    },
    created() {
      this.GetTemp()
      this.goodscontent()
    },
    mounted() {



      // 生命周期
      // console.log(this.tableData);
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>

  .red_ {
    color: red;
  }

  /*手机*/
  @media screen and (min-width: 100px) and (max-width: 960px) {
    .top {
      width: 100%;
      height: 167px;
    }
    .add_zhandian {
      width: 100%;
      height: 54px;
    }
    .selech {
      width: 100%;
      height: 109px;
    }
  }

  /*PC*/
  @media screen and (min-width: 960px) and (max-width: 1900px) {
    .top {
      width: 100%;
      height: 50px;
    }
    .add_zhandian {
      width: 20%;
      height: 100%;
      float: left;
    }
    .selech {
      width: 79%;
      height: 100%;
      float: left;
    }
    .content_body {
      width: 100%;
      height: 650px;
    }
    .content_body ul {
      width: 100%;
      height: 100%;
    }
    .content_body ul li {
      float: left;
      height: 100%;
    }
    .left_ {
      width: 20%;
    }
    .right_ {
      width: 79%;
    }
  }

  .app-container {
    .roles-table {
      margin-top: 30px;
    }
    .permission-tree {
      margin-bottom: 30px;
    }
  }

  .imas {
    width: 50px;
    height: 50px;
  }
</style>
